<template>
    <view>
        <nav-bar ref="navBar" fontColor="#fff" bgColor="#000">充值</nav-bar>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <view class="vip_bg_box">
            <view class="status_bar"></view>
            <view class="user_info_box">
                <image :src="userInfo.headImg" mode="aspectFill"></image>
                <view class="info">
                    <view class="name">
                        <text>{{ userInfo.nickName || "" }}</text>
                        <view>{{ userInfo.memberRoleName  || "" }}</view>
                    </view>
                    <view class="tip">
                        积分：
                        <text>{{ userInfo.integralCount  || "0" }}</text>
                        ，距离下个等级还需
                        <text>{{ userInfo.nextLevelRequireIntegral  || "0" }}</text>
                        积分
                    </view>
                </view>
            </view>
            <view class="recharge_box">
                <view class="recharge">
                    <view class="title">充值套餐</view>
                    <view class="vip_category_box">
                        <view class="vip_item" :class="{active: currentLevel == item.level }" v-for="(item,index) of rechargeList"
                            :key="index" @click="getItem(item.level)">
                            <view>
                                ¥
                                <text class="money">{{item.levelMoney}}</text>
                            </view>
                            <text>获得{{item.levelIntegral}}积分</text>
                        </view>
                    </view>
                    <view class="btn" @click="onSubmit">确认充值</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import goodsTypeSelect from '@/components/module/goods_type_select';
    import {
        mapState,
        mapMutations
    } from 'vuex';
    import { setPayAssign } from '@/config/utils';
    export default {
        components: {
            goodsTypeSelect
        },
        data() {
            return {
                pageScroll: 0,
                currentLevel: 9999,
                rechargeList: []
            };
        },
        computed: {
            ...mapState(['userInfo'])
        },
        //第一次加载
        onLoad(e) {
            this.pageData();
        },
        //页面显示
        onShow() {},
        //方法
        methods: {
            onPageJump(url) {
                uni.navigateTo({
                    url: url
                });
            },
            pageData() {
                this.$http.get('api/open/v1/member_recharge_combos').then(res => {
                    this.rechargeList = res;
                });
            },
            getItem(level) {
                this.currentLevel = level;
            },
            onSubmit(){
                if(this.currentLevel == 9999){
                    uni.showToast({
                        title: "请选择充值金额",
                        icon: "none"
                    });
                    return;
                }
                let httpData = {
                    level: this.currentLevel
                };
                this.$http.get("api/order/v1/member_recharge", httpData).then(res => {
                	//支付
                	setPayAssign(res);
                });
            }
        },
        //页面隐藏
        onHide() {},
        //页面卸载
        onUnload() {},
        onPageScroll(e) {
            this.$refs.navBar.pageScroll(e);
            this.pageScroll = e.scrollTop;
        },
        //页面下来刷新
        onPullDownRefresh() {},
        //页面上拉触底
        onReachBottom() {},
        //用户点击分享
        onShareAppMessage(e) {
            return this.wxShare();
        }
    };
</script>
<style lang="scss" scoped>
    @import '@/style/mixin.scss';

    .vip_bg_box {
        background-color: #000;
        //background-image: url(../../../static/icon/vip/bg_vip.png);
        background-size: 100% auto;
        background-repeat: no-repeat;
        width: 100%;
        padding-bottom: 60rpx;
        position: fixed;
        left: 0;
        top: 0;

        .status_bar {
            height: var(--status-bar-height);
        }

        .user_info_box {
            padding-top: 120rpx;
            padding-left: 30rpx;
            padding-right: 30rpx;
            display: flex;
            align-items: center;

            image {
                width: 80rpx;
                height: 80rpx;
                border-radius: 50%;
                flex-shrink: 0;
            }

            .info {
                margin-left: 24rpx;

                .name {
                    display: flex;
                    align-items: center;

                    text {
                        font-size: 24rpx;
                        color: #ffffff;
                    }

                    view {
                        font-size: 24rpx;
                        color: #ffffff;
                        margin-left: 25rpx;
                    }
                }

                .tip {
                    font-size: 24rpx;
                    color: #999999;
                    margin-top: 12rpx;

                    text {
                        font-size: 24rpx;
                        color: #e6bc5a;
                    }
                }
            }
        }
    }

    .recharge_box {
        background-color: #000;
        height: 100vh;
        margin-top: 44rpx;

        //position: relative;
        .recharge {
            border-radius: 40rpx 40rpx 0 0;
            background-color: #fff;
            height: 100%;
            padding: 40rpx 32rpx;

            .title {
                font-size: 32rpx;
                color: #333333;
            }

            .vip_category_box {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;

                //flex-direction: column;
                //height: 162rpx;
                .vip_item {
                    margin-top: 24rpx;
                    width: 48.5%;
                    height: 162rpx;
                    border-radius: 8rpx;
                    border: solid 1px #e5e5e5;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    color: #333333;
                    line-height: 45rpx;

                    //text-align: center;
                    &.active {
                        background-color: #fff8db;
                        border: solid 1px #ffcc54;
                        color: #d19200;
                    }

                    view {
                        font-size: 28rpx;

                    }

                    .money {
                        font-size: 48rpx;

                    }

                    text {
                        font-size: 24rpx;

                        &.active {
                            color: #eccc82;
                        }
                    }
                }
            }
        }
    }

    .btn {
        margin-top: 56rpx;
        height: 88rpx;
        background-image: linear-gradient(267deg, #eccc82 0%, #d4a842 100%);
        border-radius: 8rpx;
        color: #ffffff;
        text-align: center;
        line-height: 88rpx;
        font-size: 32rpx;
    }
</style>
